<template>
    <section class="buy-product-show bgcFFF ">
      <div class="product-show-box line-bottom"  v-for="(item,index) in dataList" :key="index" >
        <img :src="item.src" alt="">
        <div class="msg pr">
          <p>{{item.name}}</p>
          <p>规格 {{item.model}}</p>
          <p class="pa">￥{{item.price}} <span>x{{item.num}}</span></p>
        </div>
      </div>
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {

      }
    },
    props:['dataList'],
    methods: {

    },
  }
</script>

<style scoped lang="scss">
  @import "../assets/css/base";

  .buy-product-show{
    width: 100%;
    height: auto;
    font-size: 14px;

    .product-show-box{
      display: flex;
      width: 100%;
      height: 104px;
      padding:12px 15px;
      box-sizing: border-box;

      img{
        width: 80px;
        /*height: 80px;*/
        max-height:80px;
        vertical-align: top;
      }

      .msg{
        display: inline-block;
        width: 100%;
        height: 100%;
        padding: 0 0 0 15px;
        box-sizing: border-box;

        p:nth-child(2){
          font-size: 12px;
          color: #999AA3;
        }

        p:nth-child(3){
          position: absolute;
          bottom:0;
          left:0;
          width: 100%;
          padding: 0 0 0 15px;
          box-sizing: border-box;
          color: #F54E4E;

          span{
            float: right;
          }
        }
      }
    }

  }
</style>
